
<!-- 倒计时组件 -->
<template>
    <div class="countdown_box">
        <p>京东秒杀</p>
        <p>12:00专场</p>
        <van-count-down :time="time">
            <template #default="timeData">
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
            </template>
        </van-count-down>

    </div>
</template>

<script>
export default {
    data() {
        return {
            time: 30 * 60 * 60 * 1000, //倒计时的毫秒数 单位毫秒数
        }
    },
    created() {
        // 获取当前的小时
        //console.log(new Date().getHours());
        let year = new Date().getFullYear();
        let month = new Date().getMonth() + 1;
        let date = new Date().getDate()
        // console.log(year, month, date);
        //console.log(new Date(`${year}/${month}/${date} 12:00:00`).getTime());
        let endtime = new Date(`${year}/${month}/${date} 12:00:00`).getTime()
        let nowtime = new Date().getTime()
        if (new Date().getHours() >= 12) {
            this.time = 0
        } else {
            this.time = endtime - nowtime
        }
    }
}
</script>
<style lang="less" scoped>
.countdown_box {
    display: flex;
    padding: 14px;
    justify-content: space-between;
    align-items: center;

    p:nth-child(1) {
        font-size: 16px;
        font-weight: 800;
    }

    p:nth-child(2) {
        font-size: 16px;
        color: red;
    }
}

.colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
}

.block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
}
</style>